<?xml version="1.0" encoding="UTF-8" ?>
<%@page import="javax.servlet.jsp.jstl.fmt.LocalizationContext"%>
<%@page import="java.util.ResourceBundle"%>
<%@page import="java.util.Calendar"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@ page import="org.jakim.entity.*"%>
<%@ page import="org.jakim.utils.*"%>
<%@page import="org.apache.taglibs.standard.tlv.JstlCoreTLV"%>
<%@page import="org.apache.taglibs.standard.tlv.JstlFmtTLV"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<fmt:setLocale value="en" />
<fmt:setBundle basename="org.jakim.messages.messages" var="msg"
	scope="session" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<link href="../styles/main.css" rel="stylesheet" type="text/css" />
<link href="../styles/wizard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

function setOnwards(chkBox) {
   document.getElementById('cbToMonth').disabled = chkBox.checked;
   document.getElementById('cbToYear').disabled = chkBox.checked;
   chkBox.value = chkBox.checked;
}

</script>
</head>
<body>
	<%
	HttpSession httpSeesion = request.getSession();
	List<WorkExperience> listWorkExperience = null;
	
	Object objWrokExperience = httpSeesion.getAttribute("attrWrokExperience");
	
	if (objWrokExperience == null){
		listWorkExperience = new ArrayList<WorkExperience>();
		httpSeesion = request.getSession();
	}else{
		if(objWrokExperience instanceof List<?>){
			listWorkExperience = (List<WorkExperience>) objWrokExperience;
		}
	}
%>
	<div id="divBodyContainer">
		<h1>
			<fmt:message key="WORKEXPERIENCE.HEADER" />
		</h1>

		<p>
			<fmt:message key="WORKEXPERIENCE.SUMMARY" />
		</p>

		<button id="addButton">
			<fmt:message key="WORKEXPERIENCE.ADDEXPERIENCE.BUTTON" />
		</button>

		<div class="wizardHistoryBody">
			<%
	   			if (listWorkExperience != null && listWorkExperience.size() > 0){
	   				%>
			<table id="addedWorkTable" class="userEntriesTable">
				<tr>
					<th><fmt:message
							key="WORKEXPERIENCE.EPERIENCE.TABLE.HEADER.LABEL" /></th>
				</tr>
				<% 
		   			for(WorkExperience wp: listWorkExperience){
		   				%>
				<tr class="WorkExperienceDate">
					<td colspan="2">
						<p></p>
					</td>
				</tr>

				<tr class="WorkExperienceDate">
					<td class="colParam"><fmt:message
							key="WORKEXPERIENCE.EPERIENCE.TABLE.DATES.LABEL" />:</td>
					<td class="colValue"><%=wp.getHTMLDates() %></td>
				</tr>

				<tr class="WorkExperienceOccupation">
					<td class="colParam"><fmt:message
							key="WORKEXPERIENCE.EPERIENCE.TABLE.OCCUPATION.LABEL" />:</td>
					<td class="colValue"><%=wp.getWorkOccupation() %></td>
				</tr>

				<tr class="WorkExperienceActivities">
					<td class="colParam"><fmt:message
							key="WORKEXPERIENCE.EPERIENCE.TABLE.ACTIVITIES.LABEL" />:</td>
					<td class="colValue"><%=wp.getWorkMainActivities() %></td>
				</tr>

				<tr class="WorkExperienceEmployerSpecifics">
					<td class="colParam"><fmt:message
							key="WORKEXPERIENCE.EPERIENCE.TABLE.EMPLOYERDATA.LABEL" />:</td>
					<td class="colValue"><%=wp.getHtmlEmployerSpec() %></td>
				</tr>

				<tr class="WorkExperienceBusinessType">
					<td class="colParam"><fmt:message
							key="WORKEXPERIENCE.EPERIENCE.TABLE.BUSINESSTYPE.LABEL" />:</td>
					<td class="colValue"><%=wp.getHtmlEmployerSpec() %></td>
				</tr>
				<%
		   			}
	   				%>
			</table>
			<%
   				}
	   		%>
		</div>
		<div id="shade"></div>
		<div id="modalForm">
			<form id="formWorkExperience" class="formExperience"
				action="../addinfo" method="post">
				<fieldset id="fsetWorkExperience" class="fsetWizard">
					<legend>
						<fmt:message key="WORKEXPERIENCE.FORM.LABEL" />
						:
					</legend>
					<div id="divWorkDates">
						<label id="lblDates" for="cbFromMonth" class="WizardSection">
							<fmt:message key="WORKEXPERIENCE.FORM.DATES.LABEL" />:
						</label> <label id="lblFromMonth" for="cbFromMonth"> <fmt:message
								key="WORKEXPERIENCE.FORM.DATES.FROM.MONTH.LABEL" />:
						</label> <select id="cbFromMonth" name="workExperienceDatesStartMonth">

							<% 
	                            	ResourceBundle res = ((LocalizationContext)session.getAttribute("msg")).getResourceBundle();
                                    for(Months month: Months.values()){
                                    	 out.write("<option value='" + month.getMonthNumber() + 
                                                 "'>" + res.getString("MONTH.NAME." + month.name()) + 
                                                 "</option>"); 
                                    }
	                            %>

						</select> <select id="cbFromYear" name="workExperienceDatesStartYear">
							<%
	                                Calendar cal = Calendar.getInstance();
	                                int year = cal.get(Calendar.YEAR);
	                                for (int i = year; i >= 1900; i--){
	                                    out.write("<option value='" + i + "'>" + i + "</option>"); 
	                                }
	                            %>
						</select>
						<p>&nbsp;</p>
						<label id="lblToMonth" for="cbToMonth"> <fmt:message
								key="WORKEXPERIENCE.FORM.DATES.TO.MONTH.LABEL" />:
						</label> <select id="cbToMonth" name="workExperienceDatesEndMonth">
							<% 
	                            
                                	for(Months month: Months.values()){
                                		 out.write("<option value='" + month.getMonthNumber() + 
                                             "'>" + res.getString("MONTH.NAME." + month.name()) + 
                                             "</option>"); 
                                	}
	                            %>
						</select> <select id="cbToYear" name="workExperienceDatesEndYear">
							<%
	                                for (int i = year; i >= 1900; i--){
	                                    out.write("<option value='" + i + "'>" + i + "</option>"); 
	                                }
	                            %>
						</select> <br /> <label for="isOnwards" id="chkBoxOnwards"> <fmt:message
								key="WORKEXPERIENCE.FORM.DATES.ONWARDS.LABEL" />
						</label> <input type="checkbox" id="isOnwards" name="isOnwards"
							onchange="setOnwards(this);" />
					</div>

					<div id="divOccupation">
						<label id="lblOccupation" for="txtOccupation"
							class="WizardMainLabel"> <fmt:message
								key="WORKEXPERIENCE.FORM.OCCUPATION.LABEL" />:
						</label> <input type="text" id="txtOccupation" name="workOccupation"
							maxlength="35" />
					</div>

					<div id="divMainActiviteis">
						<label id="lblActiviteis" for="txtMainActiviteis"
							class="WizardMainLabel"> <fmt:message
								key="WORKEXPERIENCE.FORM.MAINACTIVITES.LABEL" />:
						</label>
						<textarea id="txtMainActiviteis" name="workMainActiviteis"
							rows="8" cols="20"></textarea>
					</div>

					<div id="divEmployerName">
						<label id="lblEmployerName" for="txtEmployerName"
							class="WizardMainLabel"> <fmt:message
								key="WORKEXPERIENCE.FORM.EMPLOYERNAME.LABEL" />:
						</label> <input type="text" id="txtEmployerName" name="workEmployerName"
							maxlength="35" />
					</div>

					<div id="divEmployerSirName">
						<label id="lblEmployerSirName" for="txtEmployerSirName"
							class="WizardMainLabel"> <fmt:message
								key="WORKEXPERIENCE.FORM.EMPLOYESIRNAME.LABEL" />:
						</label> <input type="text" id="txtEmployerSirName"
							name="workEmployerSirName" maxlength="35" />
					</div>

					<div id="divEmployerAddreass">
						<label id="lblEmployerAddreass" for="txtEmployerAddreass"
							class="WizardMainLabel"> <fmt:message
								key="WORKEXPERIENCE.FORM.EMPLOYERADDRESS.LABEL" />:
						</label>
						<textarea id="txtEmployerAddreass" name="workEmployerAddress"
							rows="4" cols="20"></textarea>
					</div>

					<div id="divType">
						<label id="lblType" for="txtType" class="WizardMainLabel">
							<fmt:message key="WORKEXPERIENCE.FORM.TYPE.LABEL" />:
						</label> <input type="text" id="txtType" name="workType" maxlength="35" />
					</div>
				</fieldset>

				<input type="hidden" value="1" name="numberCVWizardStep" />

				<button type="submit">
					<fmt:message key="SUBMIT.BUTTON" />
				</button>
			</form>
		</div>
		<button id="next"
			onclick="window.location.href = 'educationwizard.jsp'">next</button>
		<script type="text/javascript">        
            var modal= document.getElementById('modalForm');
            var shade= document.getElementById('shade');
            document.getElementById('addButton').onclick= function() {
                modal.style.display=shade.style.display= 'block';
            };
            
            document.getElementById('close').onclick= function() {
                modal.style.display = shade.style.display = 'none';
            };

            // This code is a workaround for IE6's lack of support for the
            // position: fixed style.
            //
            if (!('maxHeight' in document.body.style)) {
                function modalsize() {
                    var top= document.documentElement.scrollTop;
                    var winsize= document.documentElement.offsetHeight;
                    var docsize= document.documentElement.scrollHeight;
                    shade.style.height= Math.max(winsize, docsize)+'px';
                    modal.style.top= top+Math.floor(winsize/3)+'px';
                };
                modal.style.position=shade.style.position= 'absolute';
                window.onscroll=window.onresize= modalsize;
                modalsize();
            }
        </script>
	</div>
</body>
</html>